<template>
    <div class="container" @click="handleGallaryClick">
        <div class="wrapper">
            <swiper :options="swiperOption">
                <!-- slides -->
                <swiper-slide v-for="(item, index) of imgs" :key="index">
                    <img class="gallary-img" :src="item"/>
                </swiper-slide>
                <!-- Optional controls -->
                <div class="swiper-pagination"  slot="pagination"></div>
                <!--
                  轮播中的左箭头
                 <div class="swiper-button-prev" slot="button-prev"></div>
                  轮播中的右箭头
                  <div class="swiper-button-next" slot="button-next"></div>
                  轮播中的灰色线
                  <div class="swiper-scrollbar"   slot="scrollbar"></div>
                  -->
            </swiper>
        </div>
    </div>
</template>

<script>
   export default {
      name: "CommonGallary",
      props:{
         imgs:{
            type:Array,
            default () {
               return []
            }
         }
      },
      data () {
         return {
            swiperOption: {
               pagination: '.swiper-pagination',
               paginationType:'fraction',/*图片页码显示*/
               observeParents:true,/*检测到父级dom元素发生变化时，页面会自动刷新一次*/
               observer:true/*检测到dom元素发生变化时，页面会自动刷新一次*/
            }
         }
      },
      methods:{
         handleGallaryClick () {
            this.$emit('close')
         }
      }
   }
</script>

<style lang="stylus" scoped>
    .container >>> .swiper-container
      overflow  inherit
    .container
      display flex
      z-index 99
      position fixed
      flex-direction column
      justify-content center
      left 0
      right 0
      top 0
      bottom 0
      background #000
      .wrapper
        width 100%
        height 0
        padding-bottom 100%
        .gallary-img
          width 100%
        .swiper-pagination
          color #fff
          bottom -1rem


</style>